<template>
    <div class="root">
   <div v-for="(i,s) in list" :key="s">
      <span class="p1"><p>{{i.date}}</p></span> 
      <div class="p2">
          <p class="p3">{{i.title}}</p>
          <p class="p4">{{i.nei}}</p>
           <div class="p5"></div>
           <div class="p6">
               <a href="#" class="p7">点击查看</a>
              <img class="p8" src="/img/xiao/资源 14@2x-8.png" alt="">
           </div>
      </div>
     
   </div>
    </div>
</template>
<script>
    export default {
    props:["list"]
    }
</script>
<style scoped >
.root{
    background-color: #f1f1f1;
    padding: 0vw 4vw;
    height: 157vw;
    overflow-y: scroll;
    /* border: solid 1px; */
}
    .p1{
        background-color: rgba(0,0,0,0);
        display: flex;
        justify-content: center;
    }
    .p1 p{
        background-color: #CCCCCC;
        padding: 1.2vw 7vw;
        color: white;
        font-size: 5vw;
        border-radius: 3vw;
        margin: 3vw 0;
    }
    .p2{
        background-color: white;
        padding: 4vw;
        border-radius: 2vw;
    }
    .p3{
        color: #4d4d4d;
        font-size: 5vw;
    }
    .p4{
        color: #999999;
        padding: 5vw 0;
        font-size: 3.7vw;
    }
    .p5{
        border-bottom: 0.7vw solid #F6F6F6;
        width: 100%;
    }
    .p6{
        display: flex;
        justify-content: space-between;
    }
    .p7{
        color: #4d4d4d;
        padding: 2vw;
        font-size: 4.5vw;
    }
    .p8{
        height: 6vw;
        margin-top: 3vw;
    }
</style>